<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<script src="js/jQuery3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
	</head>
	<body>
		<div class="container">
			<form action="#" method="get">
				<div class="form-group">
					<label for="user">用户名</label>
					<input type="text" class="form-control" name="user" id='user' placeholder="请输入用户名" />
				</div>
				<div class="form-group">
					<label for="pwd">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
					<input type="password" class="form-control" name="pwd" id='pwd' placeholder="请输入密码" />
				</div>
				<div class="form-group">
					<label for="range">商品数量:</label>
					<p>s</p>
					<input type="range" id="range" min="1" max="100" class="form-control-range">
				</div>
				<div class="form-group form-check">
					<input type="checkbox" id="check" class="form-check-input"/>
					<label for="check" class="form-check-label">记住我</label>
				</div>
				<div class="form-group">
					<input type="submit" class="btn btn-danger" value="登录"/>
				</div>
			</form>
		</div>
	</body>
</html>
<script type="text/javascript">
	$(function(){
		$('#range').change(function(){
			console.log(this.value)
			// console.log($(this).val())
			$(this).siblings('p').text(this.value)
					})
	})
</script>
